import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'; // 导入treeSelect样式
import PopupManager from "element-ui/lib/utils/popup/popup-manager";
import {RendererMapOptions} from "vxe-table/types/v-x-e-table/renderer";
import {CreateElement} from "vue/types/vue";
import {ColumnCellRenderOptions, ColumnEditRenderOptions, SlotVNodeType} from "vxe-table";
import {MyColumnCellRenderParams, MyColumnEditRenderOptions, MyColumnEditRenderParams} from "../MyTables";
import {PluginExtend} from "../pluginExtend";
import XEUtils from "xe-utils";
import {getEditOns, getNativeOns} from "../pluginUtils";
import typeOfUtils from "../../../../utils/type-of-utils";

const value: RendererMapOptions = {
  renderDefault(h: CreateElement, renderOpts: ColumnCellRenderOptions | ColumnEditRenderOptions, params: MyColumnEditRenderParams | MyColumnCellRenderParams): SlotVNodeType | SlotVNodeType[] {
    // @ts-ignore
    return value.renderEdit(h, renderOpts as MyColumnEditRenderOptions, params)
  },
  renderEdit(h, renderOpts: MyColumnEditRenderOptions, params: MyColumnEditRenderParams | MyColumnCellRenderParams) {
    const options = PluginExtend.optionsPlus(renderOpts, params)
    const vm = params.$table
    const {row, column} = params
    const {attrs} = renderOpts
    const optionProps = {
      label: renderOpts.optionProps?.label || 'label',
      value: renderOpts.optionProps?.value || 'value',
      children: renderOpts.optionProps?.children || 'children',
    }
    const cellValue = XEUtils.get(row, column.property)
    if (renderOpts.props?.appendToBody !== false) {
      if (renderOpts.props) {
        vm.$set(renderOpts.props, 'appendToBody', true)
      } else {
        vm.$set(renderOpts, 'props', {
          appendToBody: true,
        })
      }
    }
    const on = getEditOns(renderOpts, params)
    const nativeOn = getNativeOns(renderOpts, params)
    return [
      h(Treeselect, {
        attrs,
        props: {
          placeholder: '请选择',
          ...renderOpts.props,
          options,
          value: cellValue,
          normalizer: (node) => {
            if (renderOpts.props?.normalizer) {
              return renderOpts.props.normalizer(node)
            }
            if (!renderOpts.props?.loadOptions) {
              if (typeOfUtils.isEmpty(node[optionProps.children])) {
                return {
                  id: node[optionProps.value],
                  label: node[optionProps.label],
                  children: undefined
                }
              }
            }
            return {
              id: node[optionProps.value],
              label: node[optionProps.label],
              children: node[optionProps.children],
            }
          },
          noChildrenText: renderOpts.props?.noChildrenText || '暂无子节点',
          noOptionsText: renderOpts.props?.noOptionsText || '没有可用选项',
          noResultsText: renderOpts.props?.noResultsText || '未匹配到结果',
          valueConsistsOf: renderOpts.props?.valueConsistsOf || 'ALL', // 默认选中所有
        },
        on: {
          ...on,
          open: (e) => {
            if (renderOpts.props?.appendToBody !== false) {
              // @ts-ignore
              vm.$set(renderOpts.props, 'zIndex', PopupManager.nextZIndex())
            }
            if (typeOfUtils.isFunction(on?.focus)) {
              // @ts-ignore
              on.open(params, e)
            }
            PluginExtend.focusLoadAgain(renderOpts, params)
          }
        },
        nativeOn
      })
    ]
  },
}
export default value
